<template>
<div class="common-layout">
     <el-container>
      <el-header><Header></Header></el-header>
      <el-main v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
        <!-- <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto"> -->
    <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
  </ul> -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import Header from './header.vue';

import Header from "./header.vue";
import Main from './main.vue'
import list from './list.vue'

export default {
    components: { Header,Main ,list},
    
    data () {
      return {
        count: 0
      }
    },
    methods: {
      load () {
        this.count += 4
      }
    }
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.common-layout{
    height: 100%;
    width: 100%;    
}
  .el-container {
    height: 100%;
    width: 100%;
  }

  .el-header {
    width: 100%;
    height: 20%;
  }

  .el-main {
    background-color: #f4f5f5; 
    /* color: #333;  */
    text-align: center; 
    line-height: 160px;
    width: 100%;
    height: 50%;
  }
 










.infinite-list {
  height: 800px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}




</style>